<template>
	<view class="page-box">
		<mescroll-body
			:sticky="true"
			ref="mescrollRef"
			:up="upOption"
			@init="mescrollInit"
			@down="downCallback"
			@up="upCallback"
		> 
			<view v-show="tabIndex == 0" style="padding-top: 16rpx;">
				<view class="banner-wrap">
					<view class="banner">
						<template v-if="activeBid">
							<view class="banner-title">
								{{ activeBid.bid_name }}
							</view>
							<view class="banner-sub">
								- {{ activeBid.remarks }} -
							</view>	
						</template>
						<view v-else class="banner-title">
							未有进行中的场次
						</view>
						<view class="banner-mask"></view>
					</view>
				</view>
				<view class="sticky-area" style="background-color: #f6f6f6;padding: 24rpx 0">
					<view class="search-bar">
						<input v-model="keyword" type="text" placeholder="请输入搜索标品的标号">
						<uni-icons type="search" size="30" @click="handleSearch"></uni-icons>
					</view>
				</view>
				<view v-if="tabIndex == 0" class="list-wrap">
					<view class="list">
						<view v-for="item in datalist" :key="item.goods_id" style="padding: 20rpx;" @click="$g.onPageJump('goods-detail', { goods_id: item.goods_id })">
							<view class="goods-item">
								<image style="width: 315rpx;height:315rpx;" :src="item.cover | media" mode="cover"></image>
								<view style="font-size: 32rpx;padding: 10rpx 16rpx;">标号: {{ item.goods_code }}</view>
								<view style="display: flex;align-items: center;padding: 0 16rpx;">
									<view class="stock-box">{{ item.stock }}片</view>
									<view class="weight-box">{{ item.weight }}kg</view>
								</view>
								<view style="font-size: 28rpx;padding: 8rpx 16rpx 10rpx;">
									底价 
									<text style="color: #EC1111;font-size: 36rpx;">￥{{ item.label_price | numberFloor }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view v-show="tabIndex == 1">
				<view style="background-color: #097B5D;height: 346rpx;border-radius: 0 0 48rpx 48rpx;padding: 48rpx 40rpx 0;">
					<view style="display: flex;align-items: center;">
						<view v-if="userInfo && userInfo.avatar">
							<image
								style="height: 140rpx;width: 140rpx;border-radius: 30rpx;margin-right: 36rpx;"
								:src="userInfo.avatar"
								mode=""
							></image>
						</view>
						<view v-if="userInfo" style="font-size: 36rpx;color: white;flex-grow: 1;">
							<view style="margin-bottom: 16rpx;">{{ userInfo.name }}</view>
							<view style="font-size: 24rpx;margin-bottom: 4rpx;">电话：{{ userInfo.phone }}</view>
							<view style="font-size: 24rpx;">用户ID：{{ userInfo.user_id }}</view>
						</view>
						<view v-else style="font-size: 60rpx;color: white;text-align: center;flex-grow: 1;">
							请先登录
						</view>
					</view>
				</view>
				<view class="banner-wrap" style="position: absolute;left: 0;right: 0;top: 188rpx;">
					<view class="banner">
						<template v-if="activeBid">
							<view class="banner-title">
								{{ activeBid.bid_name }}
							</view>
							<view class="banner-sub">
								- {{ activeBid.remarks }} -
							</view>	
						</template>
						<view v-else class="banner-title">
							未有进行中的场次
						</view>
						<view class="banner-mask"></view>
					</view>
				</view>
				<view v-if="tabIndex == 1" class="list-wrap" style="padding-top: 168rpx;">
					<view>
						<view v-for="item in datalist" :key="item.id" class="bidgoods-item" @click="$g.onPageJump('goods-detail', { goods_id: item.goods.goods_id })">
							<view class="bidgoods-item-info">
								<view style="font-size: 36rpx;padding-bottom: 16rpx">标号：{{ item.goods.goods_code }}</view>
								<view style="display: flex;align-items: center;padding-bottom: 16rpx;">
									<view class="stock-box">{{ item.goods.stock }}片</view>
									<view class="weight-box">{{ item.goods.weight }}kg</view>
								</view>
								<view style="font-size: 28rpx">我的投标价：</view>
								<view style="font-size: 44rpx;color: #EC1111;padding-bottom: 12rpx">￥{{ item.price | numberFloor }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
		<view style="padding: 50rpx 0 150rpx;width: 100%;text-align: center;font-size: 24rpx;color: #5E5B5B">
			- 本系统由拼一手珠宝平台提供技术支持 -
		</view>
		<view style="position: fixed;bottom: 160rpx;left: 0;right: 0;display: flex;justify-content:center;">
			<pys-button width="640" height="120" size="48" borderRadius="60" @click="handleBid">开始投标</pys-button>
		</view>
		<tabbar v-model="tabIndex"></tabbar>
		<bid-modal ref="bidModal"></bid-modal>
	</view>
</template>

<script>
import MescrollMixin from '@/plugins/mescroll-uni/mescroll-mixins.js';
import tabbar from '@/components/tabbar/tabbar.vue';
import bidModal from '@/components/bid-modal/bid-modal.vue';

export default {
	components: {
		tabbar
	},
	mixins: [MescrollMixin],
	data() {
		return {
			tabIndex: 0,
			datalist: [],
			upOption: {
				toTop: {
					bottom: 200,
				}
			},
			keyword: null
		};
	},
	watch: {
		tabIndex(nVal, oVal) {
			if (nVal != oVal) {
				this.handleSearch();
			}
		}
	},
	computed: {
		isLogin() {
			return this.$store.state.user.authorization;
		},
		activeBid() {
			return this.$store.state.activeBid;
		},
		userInfo() {
			return this.$store.state.user.userInfo;
		}
	},
	methods: {
		/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
		handleSearch() {
			this.datalist = [];
			this.mescroll.resetUpScroll();
		},
		upCallback(page) {
			//联网加载数据
			if (this.tabIndex == 0) {
				this.loadData(page.num);
			} else if (this.tabIndex == 1) {
				this.loadData1(page.num);
			}
		},
		downCallback() {
			this.mescroll.resetUpScroll();
			this.$store.dispatch('getActiveBid')
				.then(res => {
					this.mescroll.endSuccess(1, false);
				})
				.catch(err => {
					this.mescroll.endSuccess(1, false);
				});
		},
		loadData(pageNo) {
			// 模拟接口
			const params = { is_show: 1, is_biding: 1 };
			if (this.keyword) {
				params.goods_code = this.keyword;
			}
			this.$apis.goods.getPaginate({ ...params, page: pageNo }, { isData: false })
				.then(res => {
					if (pageNo == 1) this.datalist = [];
					this.mescroll.endBySize(res.data.length, res.total);
					this.datalist = this.datalist.concat(res.data);
					console.log(this.datalist);
				})
				.catch(err => {
					console.error(err);
					this.mescroll.endErr();
				});
		},
		loadData1(pageNo) {
			// 模拟接口
			this.$apis.bid.getBidGoodsPaginate({ is_max: 1, page: pageNo }, { isData: false })
				.then(res => {
					if (pageNo == 1) this.datalist = [];
					this.mescroll.endBySize(res.data.length, res.total);
					this.datalist = this.datalist.concat(res.data);
				})
				.catch(err => {
					console.error(err);
					this.mescroll.endErr();
				});
		},
		handleBid() {
			this.$refs.bidModal.open()
				.then(res => {
					console.log(res);
					return this.$apis.bid.storeBidGoods({
						goods_code: res.goods_code,
						price: res.price
					}, { isLoad: true });
				})
				.then(res => {
					uni.showToast({
						icon: 'success',
						title: '投标成功'
					});
					this.mescroll.resetUpScroll();
				});
		}
	},
	onLoad(e) {
		console.log(e)
		if (e.current) {
			this.tabIndex = Number(e.current)
		}
	}
};
</script>

<style>
.banner-wrap {
	padding: 24rpx;
}
.banner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	padding: 48rpx 0; 
	position: relative;
	height: 280rpx;
	border-radius: 20rpx;
	overflow: hidden;
	background-size: cover;
	background-image: url(/static/background1.png);
}
.banner-mask {
	position: absolute;
	z-index: 0;
	background-color: #555; 
	opacity: 0.52;
	top:0;
	right:0;
	left: 0;
	bottom:0;
}
.banner-title {
	font-size: 72rpx;
	z-index: 1;
	font-weight: bold;
	color: white;
}
.banner-sub {
	font-size: 40rpx;
	z-index: 1;
	font-weight: bold;
	color: white;
}
.list-wrap {
	display: flex;
	justify-content: center;
}
.list {
	display: flex;
	flex-wrap: wrap;
	width: 710rpx;
}
.stock-box {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 46rpx;
	padding: 0 16rpx;
	background-color: rgba(85, 85, 85, 0.52);
	color: white;
	border-radius: 36rpx;
}
.weight-box {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 46rpx;
	margin-left: 10rpx;
	padding: 0 16rpx;
	background-color: #88CABE;
	color: #097B5D;
	border-radius: 36rpx;
}
.goods-item {
	width: 315rpx;
	background-color: white;
}
.bidgoods-item {
	display: flex;
	overflow: hidden;
	width: 690rpx;
	height: 302rpx;
	background-color: white;
	margin-bottom: 40rpx;
	border-radius: 40rpx 0px 0px 40rpx;
}
.bidgoods-item-image {
	width: 302rpx;
	height: 302rpx;
}
.bidgoods-item-info {
	flex-grow: 1;
	padding: 16rpx;
}

.search-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 40rpx;
	margin: 0 40rpx;
	background-color: white;
	height: 100rpx;
	border-radius: 40rpx;
}
</style>
